<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title>TMap 演示页面</title>
		<link rel="stylesheet" href="layui/css/layui.css">\
		<style>
			.doc p{
				color: red;
				font-size: 18px;
				margin: 3px;
			}
		</style>
	</head>
	<body>
		<div class="doc" style="width: 50%;margin: 0 auto;">
			<h1 style="margin-bottom: 25px;">TMap使用案例：</h1>
			<a id="tmap" style="cursor: pointer;">点击我打开样例</a>
			<p>① 使用前需要先注册为腾讯地图开发者，获取到appkey,并设置好地图API访问权限</p>
			<p>② 然后将入腾讯地图js，CDN如下：</p>
			<pre class="layui-code">
				https://map.qq.com/api/js?v=2.exp&key=你的KEY&libraries=place
			</pre>
			<p>③ 完成准备工作后按下文完成插件的配置即可开心的划地图拉坐标了！</p>
			<pre class="layui-code">
				// 配置 layui 第三方扩展组件存放的基础目录,并注册模块
				layui.config({
					&nbsp;&nbsp;&nbsp;&nbsp;base: 'module/TMap/'
				}).use('TMap');
				<br />
				// 加载并使用模块
				layui.use(['layer', 'TMap'], function(){
					&nbsp;&nbsp;&nbsp;&nbsp;var layer = layui.layer;
					&nbsp;&nbsp;&nbsp;&nbsp;var $ = layui.jquery;
					&nbsp;&nbsp;&nbsp;&nbsp;var TMap = layui.TMap;
					<br />
					&nbsp;&nbsp;&nbsp;&nbsp;// 直接打开地图
					&nbsp;&nbsp;&nbsp;&nbsp;TMap.open({
						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;key: "5KVBZ-GAF6K-M5JJ7-A7BK4-WDAYQ-YKBYQ",
						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dialog: {title: '老滇山寨坐标选取'},
						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onChoose: function (point, adress, myIndex) {
							&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log("point:"+ point +"\nadress:"+ adress +"\nmyIndex:"+ myIndex);
						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
					&nbsp;&nbsp;&nbsp;&nbsp;});
				});
			</pre>
			<p>④ TMap配置参数</p>
			<pre class="layui-code">
				{
					&nbsp;&nbsp;&nbsp;&nbsp;key: 腾讯地图KEY,
					&nbsp;&nbsp;&nbsp;&nbsp;dialog: {// 窗口配置参数
						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;title： 窗口标题，
						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;area：  窗口大小，格式 ['750px', '550px']
						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;shade： 遮罩层透明度
						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;skin：  自定义皮肤
					&nbsp;&nbsp;&nbsp;&nbsp;},
					&nbsp;&nbsp;&nbsp;&nbsp;onChoose: function(point, adress, myIndex){} // 回调函数
				}
				
				回调函数参数介绍：
				   point：经纬度坐标点，数据格式 (经度,纬度)；
				   adress: 选中点中文地址；
				   myIndex: 当前窗口层级，可使用 layer.close(layer.index)来关闭地图弹窗层；
			</pre>
		</div>
		<script src="layui/layui.js"></script>
		<script src="https://map.qq.com/api/js?v=2.exp&key=5KVBZ-GAF6K-M5JJ7-A7BK4-WDAYQ-YKBYQ&libraries=place"></script>
		<script>
			// 配置 layui 第三方扩展组件存放的基础目录,并注册模块
			layui.config({
			  base: 'module/TMap/'
			}).use('TMap');
			
			// 加载并使用模块
			layui.use(['layer', 'code', 'TMap'], function(){
			  var layer = layui.layer;
			  var $ = layui.jquery;
			  var TMap = layui.TMap;
			  layui.code();
			  $("#tmap").click(function(){
				  TMap.open({
				  	key: "5KVBZ-GAF6K-M5JJ7-A7BK4-WDAYQ-YKBYQ",
				  	dialog: {title: '老滇山寨坐标选取'},
				  	onChoose: function (point, adress, myIndex) {
				  		alert("point:"+ point +"\nadress:"+ adress +"\nmyIndex:"+ myIndex);
				  	}
				  });
			  });			  
			});
		</script> 
	</body>
</html>
